<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { User, Lock, Check } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useTokenStore } from '@/stores/token'
import { userRegisterService, userLoginService } from '@/api/user.js'

// 控制状态：true-注册; false-登录
const isRegister = ref(false)

// 注册表单数据
const registerData = ref({
    username: '',
    password: '',
    rePassword: ''
})

// 登录表单数据
const loginData = ref({
    username: '',
    password: '',
})

// 特色功能列表
const features = ref([
    '银行级安全加密保障',
    '跨平台同步使用',
    '单点登录企业应用',
    '多级权限管理系统',
    '七星剑诀',
    '五雷天心诀',
    '至圣乾坤功',
    '九幽玄天神功',
    '青元剑诀',
])

// 校验密码的函数
const checkRePassword = (rule, value, callback) => {
    if (value !== registerData.value.password) {
        callback(new Error('两次输入的密码不一致'))
    } else {
        callback()
    }
}
// 表单验证规则
const rules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' },
    ],
    rePassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        { validator: checkRePassword, trigger: 'blur' }
    ],
}

// 登录表单规则
const loginRules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ]
}

// 调用后台接口，完成注册
const register = async () => {
    // registerData 是一个响应式对象，如果要获取值，需要.value
    let result = await userRegisterService(registerData.value)
    let code = result.code;
    if (code == 0 || code == 200) {
        clearRegisterData();
        isRegister.value = false;
    }
    // alert(result.msg? result.msg : '注册成功');
    ElMessage.success(result.msg ? result.msg : '注册成功')
}

const router = useRouter()
const tokenStore = useTokenStore()

// 登录函数
const login = async () => {
    // 调用接口，完成登录
    let result = await userLoginService(loginData.value)

    // alert(result.msg? result.msg : '登录成功');
    ElMessage.success(result.msg ? result.msg : '登录成功')

    // 把得到的 token 存储到 pinia 中
    tokenStore.setToken(result.data)

    // 跳转到首页，使用 useRouter 切换组件，完成跳转
    router.push('/layoutVue')
}
// 定义函数，清空数据模型的数据
const clearRegisterData = () => {
    registerData.value = {
        username: '',
        password: '',
        rePassword: ''
    }

    loginData.value = {
        username: '',
        password: ''
    }
}
</script>

<template>
    <div class="login-page">
        <!-- 登录/注册表单容器 -->
        <div class="form-container">
            <!-- 品牌Logo -->
            <div class="brand-logo">
                <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
                    <circle cx="24" cy="24" r="24" fill="#3a8ffe" />
                    <path d="M31 16L22 25L17 20" stroke="white" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
                <span>Tms运输管理系统</span>
            </div>

            <!-- 注册表单 -->
            <el-form v-if="isRegister" ref="registerForm" :model="registerData" :rules="rules" size="large"
                autocomplete="off" class="auth-form">
                <h1 class="form-title">创建账户</h1>

                <el-form-item prop="username">
                    <el-input v-model="registerData.username" placeholder="设置用户名（5-16位字符）" :prefix-icon="User" />
                </el-form-item>

                <el-form-item prop="password">
                    <el-input v-model="registerData.password" type="password" placeholder="设置密码（5-16位字符）"
                        :prefix-icon="Lock" show-password />
                </el-form-item>

                <el-form-item prop="rePassword">
                    <el-input v-model="registerData.rePassword" type="password" placeholder="确认密码" :prefix-icon="Lock"
                        show-password />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" class="submit-button" @click="register">
                        立即注册
                    </el-button>
                </el-form-item>

                <div class="form-footer">
                    已有账户？
                    <el-link type="primary" @click="isRegister = false; clearRegisterData()">返回登录</el-link>
                </div>
            </el-form>

            <!-- 登录表单 -->
            <el-form v-else ref="loginForm" :model="loginData" :rules="loginRules" size="large" autocomplete="off"
                class="auth-form">
                <h1 class="form-title">欢迎登录</h1>

                <el-form-item prop="username">
                    <el-input v-model="loginData.username" placeholder="请输入用户名" :prefix-icon="User" />
                </el-form-item>

                <el-form-item prop="password">
                    <el-input v-model="loginData.password" type="password" placeholder="请输入密码" :prefix-icon="Lock"
                        show-password />
                </el-form-item>

                <el-form-item class="remember-row">
                    <div class="flex-row">
                        <el-checkbox v-model="loginData.rememberMe">记住登录状态</el-checkbox>
                        <el-link type="primary" underline="never">忘记密码?</el-link>
                    </div>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" class="submit-button" @click="login">
                        登录
                    </el-button>
                </el-form-item>

                <div class="social-login">
                    <div class="divider">
                        <span>其他登录方式</span>
                    </div>

                    <div class="social-buttons">
                        <el-button circle class="social-btn">
                            <svg width="20" height="20" viewBox="0 0 24 24">
                                <path
                                    d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                                    fill="#4285F4" />
                                <path
                                    d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                                    fill="#34A853" />
                                <path
                                    d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                                    fill="#FBBC05" />
                                <path
                                    d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                                    fill="#EA4335" />
                            </svg>
                        </el-button>

                        <el-button circle class="social-btn">
                            <svg width="20" height="20" viewBox="0 0 24 24">
                                <path
                                    d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"
                                    fill="#1877F2" />
                            </svg>
                        </el-button>

                        <el-button circle class="social-btn">
                            <svg width="20" height="20" viewBox="0 0 24 24">
                                <path
                                    d="M23.44 4.83c-.8.36-1.66.6-2.56.71.94-.56 1.67-1.44 2.01-2.5-.88.52-1.86.9-2.9 1.1-.83-.88-2.01-1.43-3.32-1.43-2.51 0-4.55 2.04-4.55 4.55 0 .36.04.71.12 1.04-3.78-.19-7.14-2-9.38-4.75-.4.68-.63 1.47-.63 2.32 0 1.59.81 2.99 2.04 3.81-.75-.02-1.46-.23-2.08-.58v.06c0 2.2 1.56 4.04 3.64 4.46-.38.1-.79.16-1.2.16-.3 0-.59-.03-.87-.08.59 1.84 2.29 3.18 4.31 3.22-1.57 1.23-3.56 1.97-5.72 1.97-.37 0-.74-.02-1.1-.06 2.03 1.3 4.44 2.06 7.03 2.06 8.43 0 13.04-6.98 13.04-13.03 0-.2 0-.4-.02-.6.89-.65 1.67-1.48 2.29-2.41z"
                                    fill="#1DA1F2" />
                            </svg>
                        </el-button>
                    </div>
                </div>

                <div class="form-footer">
                    没有账户？
                    <el-link type="primary" @click="isRegister = true; clearRegisterData()">立即注册</el-link>
                </div>
            </el-form>
        </div>

        <!-- 背景图片区域 -->
        <div class="bg-section">
            <div class="overlay">
                <h1>Tms运输管理系统</h1>
                <p>高端大气上档次的企业用户安全平台</p>

                <div class="features">
                    <div v-for="(feature, index) in features" :key="index" class="feature">
                        <el-icon>
                            <Check />
                        </el-icon>
                        <span>{{ feature }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.login-page {
    display: flex;
    height: 93.3vh;
    /* width: 65vw; */
    background-color: #ffffff;
    overflow: hidden;
}

.bg-section {
    flex: 1;
    background: linear-gradient(rgba(58, 143, 254, 0.9), rgba(102, 92, 231, 0.9));
    color: white;
    padding: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.bg-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(58, 143, 254, 0.8) 0%, rgba(102, 92, 231, 0.8) 100%);
}

.overlay {
    position: relative;
    z-index: 1;
    max-width: 600px;
}

.overlay h1 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
}

.overlay p {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 40px;
}

.features {
    margin-top: 40px;
}

.feature {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 16px;
}

.feature .el-icon {
    margin-right: 12px;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-container {
    width: 40%;
    min-width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.brand-logo {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.brand-logo svg {
    margin-right: 12px;
}

.brand-logo span {
    font-size: 22px;
    font-weight: 700;
    color: #2d3748;
}

.auth-form {
    width: 100%;
    max-width: 420px;
}

.form-title {
    font-size: 32px;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 30px;
    text-align: center;
}

.password-tip {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 5px;
    text-align: right;
}

.submit-button {
    width: 100%;
    height: 48px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px;
}

.form-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
    color: #718096;
}

.remember-row {
    margin-bottom: 5px;
}

.flex-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.divider {
    display: flex;
    align-items: center;
    margin: 30px 0;
    color: #a0a8b3;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e2e8f0;
}

.divider span {
    padding: 0 10px;
    font-size: 13px;
}

.social-login {
    margin-top: 10px;
}

.social-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.social-btn {
    width: 50px;
    height: 50px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1024px) {
    .bg-section {
        display: none;
    }

    .form-container {
        width: 100%;
        min-width: auto;
        max-width: 500px;
        margin: 0 auto;
        padding: 30px;
    }

    .overlay h1 {
        font-size: 32px;
    }

    .form-title {
        font-size: 28px;
        margin-bottom: 25px;
    }
}

@media (max-width: 480px) {
    .form-container {
        padding: 20px;
    }

    .brand-logo {
        margin-bottom: 30px;
    }

    .brand-logo svg {
        width: 36px;
        height: 36px;
    }

    .brand-logo span {
        font-size: 18px;
    }
}
</style>